<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 移动端顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-40">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <img class="h-8 w-8" src="/vite.svg" alt="Logo">
            <span class="ml-2 text-lg font-semibold text-gray-900">新生报到</span>
          </div>
          
          <div class="flex items-center space-x-4">
            <!-- 通知图标 -->
            <button class="p-2 text-gray-400 hover:text-gray-500 relative">
              <BellIcon class="h-6 w-6" />
              <span class="absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
                3
              </span>
            </button>
            
            <!-- 用户头像 -->
            <button @click="$router.push('/student/profile')" class="flex items-center space-x-2">
              <img 
                class="h-8 w-8 rounded-full bg-gray-300" 
                :src="studentInfo.avatar || '/default-avatar.png'"
                :alt="studentInfo.name"
              >
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
      <!-- 个人信息卡片 -->
      <div class="mb-6">
        <Card class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white">
          <div class="flex items-center space-x-4">
            <img 
              class="h-16 w-16 rounded-full border-4 border-white/20" 
              :src="studentInfo.avatar || '/default-avatar.png'"
              :alt="studentInfo.name"
            >
            <div class="flex-1">
              <h2 class="text-xl font-bold">{{ studentInfo.name }}</h2>
              <p class="text-blue-100">学号：{{ studentInfo.studentId }}</p>
              <p class="text-blue-100">{{ studentInfo.major }} · {{ studentInfo.class }}</p>
            </div>
            <div class="text-right">
              <div class="text-2xl font-bold">{{ registrationStatus.overall }}%</div>
              <div class="text-blue-100 text-sm">报到进度</div>
            </div>
          </div>
          
          <!-- 报到进度条 -->
          <div class="mt-4">
            <div class="flex justify-between text-sm text-blue-100 mb-2">
              <span>报到进度</span>
              <span>{{ registrationStatus.overall }}%</span>
            </div>
            <div class="w-full bg-blue-400/30 rounded-full h-2">
              <div 
                class="bg-white h-2 rounded-full transition-all duration-500 ease-out"
                :style="{ width: registrationStatus.overall + '%' }"
              ></div>
            </div>
          </div>
        </Card>
      </div>

      <!-- 报到步骤 -->
      <div class="mb-6">
        <Card title="报到流程">
          <div class="space-y-4">
            <div 
              v-for="(step, index) in registrationStatus.steps" 
              :key="index"
              class="flex items-center space-x-4 p-3 rounded-lg transition-colors duration-200"
              :class="{
                'bg-green-50': step.status === 'completed',
                'bg-blue-50': step.status === 'in_progress',
                'bg-gray-50': step.status === 'pending'
              }"
            >
              <div class="flex-shrink-0">
                <div 
                  class="w-8 h-8 rounded-full flex items-center justify-center"
                  :class="{
                    'bg-green-500 text-white': step.status === 'completed',
                    'bg-blue-500 text-white': step.status === 'in_progress',
                    'bg-gray-300 text-gray-600': step.status === 'pending'
                  }"
                >
                  <CheckIcon v-if="step.status === 'completed'" class="h-5 w-5" />
                  <ClockIcon v-else-if="step.status === 'in_progress'" class="h-5 w-5" />
                  <span v-else class="text-sm font-medium">{{ index + 1 }}</span>
                </div>
              </div>
              <div class="flex-1">
                <h4 class="font-medium text-gray-900">{{ step.name }}</h4>
                <p class="text-sm text-gray-600">{{ step.description }}</p>
              </div>
              <div class="flex-shrink-0">
                <StatusTag 
                  :status="step.status"
                  :text="getStepStatusText(step.status)"
                />
              </div>
            </div>
          </div>
        </Card>
      </div>

      <!-- 功能宫格 -->
      <div class="mb-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">快捷功能</h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
          <button
            v-for="feature in features"
            :key="feature.name"
            @click="$router.push(feature.path)"
            class="card card-hover p-4 text-center transition-all duration-200 hover:scale-105"
          >
            <div class="flex flex-col items-center space-y-2">
              <div 
                class="w-12 h-12 rounded-full flex items-center justify-center"
                :class="feature.bgColor"
              >
                <component :is="feature.icon" class="h-6 w-6 text-white" />
              </div>
              <span class="text-sm font-medium text-gray-900">{{ feature.name }}</span>
              <span v-if="feature.badge" class="text-xs text-red-500">{{ feature.badge }}</span>
            </div>
          </button>
        </div>
      </div>

      <!-- 缴费状态 -->
      <div class="mb-6">
        <Card title="缴费状态">
          <div class="space-y-3">
            <div 
              v-for="payment in paymentInfo.slice(0, 3)" 
              :key="payment.id"
              class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
            >
              <div class="flex items-center space-x-3">
                <div 
                  class="w-10 h-10 rounded-full flex items-center justify-center"
                  :class="payment.status === 'paid' ? 'bg-green-100' : 'bg-yellow-100'"
                >
                  <CreditCardIcon 
                    class="h-5 w-5"
                    :class="payment.status === 'paid' ? 'text-green-600' : 'text-yellow-600'"
                  />
                </div>
                <div>
                  <h4 class="font-medium text-gray-900">{{ payment.name }}</h4>
                  <p class="text-sm text-gray-600">¥{{ payment.amount.toLocaleString() }}</p>
                </div>
              </div>
              <StatusTag 
                :status="payment.status"
                :text="payment.status === 'paid' ? '已缴费' : '待缴费'"
              />
            </div>
            
            <div class="pt-3 border-t border-gray-200">
              <button 
                @click="$router.push('/student/payment')"
                class="w-full text-center text-primary hover:text-primary-hover font-medium text-sm"
              >
                查看全部缴费项目 →
              </button>
            </div>
          </div>
        </Card>
      </div>

      <!-- 最新通知 -->
      <div class="mb-6">
        <Card title="最新通知">
          <div class="space-y-3">
            <div 
              v-for="notice in notices.slice(0, 3)" 
              :key="notice.id"
              @click="viewNotice(notice)"
              class="flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg cursor-pointer transition-colors duration-200"
            >
              <div class="flex-shrink-0 mt-1">
                <div 
                  class="w-2 h-2 rounded-full"
                  :class="notice.important ? 'bg-red-500' : 'bg-blue-500'"
                ></div>
              </div>
              <div class="flex-1 min-w-0">
                <h4 class="font-medium text-gray-900 truncate">{{ notice.title }}</h4>
                <p class="text-sm text-gray-600 line-clamp-2">{{ notice.content }}</p>
                <p class="text-xs text-gray-500 mt-1">{{ formatDate(notice.publishDate) }}</p>
              </div>
              <ChevronRightIcon class="h-5 w-5 text-gray-400 flex-shrink-0" />
            </div>
            
            <div class="pt-3 border-t border-gray-200">
              <button 
                @click="$router.push('/student/notices')"
                class="w-full text-center text-primary hover:text-primary-hover font-medium text-sm"
              >
                查看全部通知 →
              </button>
            </div>
          </div>
        </Card>
      </div>

      <!-- 今日安排 -->
      <div class="mb-6">
        <Card title="今日安排">
          <div v-if="todaySchedule.length > 0" class="space-y-3">
            <div 
              v-for="item in todaySchedule" 
              :key="item.id"
              class="flex items-center space-x-3 p-3 border border-gray-200 rounded-lg"
            >
              <div class="flex-shrink-0">
                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                  <CalendarIcon class="h-5 w-5 text-blue-600" />
                </div>
              </div>
              <div class="flex-1">
                <h4 class="font-medium text-gray-900">{{ item.title }}</h4>
                <p class="text-sm text-gray-600">{{ item.time }} · {{ item.location }}</p>
              </div>
            </div>
          </div>
          <div v-else class="text-center py-8 text-gray-500">
            <CalendarIcon class="h-12 w-12 mx-auto text-gray-300 mb-2" />
            <p>今日暂无安排</p>
          </div>
        </Card>
      </div>
    </main>

    <!-- 底部导航 (移动端) -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 sm:hidden">
      <div class="grid grid-cols-4 py-2">
        <button 
          v-for="navItem in bottomNav" 
          :key="navItem.name"
          @click="$router.push(navItem.path)"
          class="flex flex-col items-center py-2 px-1"
          :class="$route.path === navItem.path ? 'text-primary' : 'text-gray-500'"
        >
          <component :is="navItem.icon" class="h-6 w-6" />
          <span class="text-xs mt-1">{{ navItem.name }}</span>
        </button>
      </div>
    </nav>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore, useStudentStore } from '../../stores'
import { formatDate } from '../../utils'
import Card from '../../components/common/Card.vue'
import StatusTag from '../../components/common/StatusTag.vue'
import {
  BellIcon,
  CheckIcon,
  ClockIcon,
  ChevronRightIcon,
  CreditCardIcon,
  CalendarIcon,
  HomeIcon,
  DocumentTextIcon,
  UserIcon,
  ChatBubbleLeftRightIcon,
  ClipboardDocumentCheckIcon,
  AcademicCapIcon,
  BuildingOffice2Icon,
  MegaphoneIcon
} from '@heroicons/vue/24/outline'

const router = useRouter()
const authStore = useAuthStore()
const studentStore = useStudentStore()

// 学生信息
const studentInfo = ref({})
const registrationStatus = ref({})
const paymentInfo = ref([])
const notices = ref([])
const schedule = ref([])

// 功能宫格配置
const features = [
  {
    name: '信息提交',
    path: '/student/info-submit',
    icon: ClipboardDocumentCheckIcon,
    bgColor: 'bg-blue-500',
    badge: null
  },
  {
    name: '在线缴费',
    path: '/student/payment',
    icon: CreditCardIcon,
    bgColor: 'bg-green-500',
    badge: '3项待缴'
  },
  {
    name: '信息查询',
    path: '/student/info-query',
    icon: AcademicCapIcon,
    bgColor: 'bg-purple-500',
    badge: null
  },
  {
    name: '通知公告',
    path: '/student/notices',
    icon: MegaphoneIcon,
    bgColor: 'bg-yellow-500',
    badge: '3条新消息'
  },
  {
    name: '日程安排',
    path: '/student/schedule',
    icon: CalendarIcon,
    bgColor: 'bg-indigo-500',
    badge: null
  },
  {
    name: '宿舍信息',
    path: '/student/info-query',
    icon: BuildingOffice2Icon,
    bgColor: 'bg-pink-500',
    badge: null
  },
  {
    name: '联系我们',
    path: '/student/contact',
    icon: ChatBubbleLeftRightIcon,
    bgColor: 'bg-gray-500',
    badge: null
  },
  {
    name: '个人中心',
    path: '/student/profile',
    icon: UserIcon,
    bgColor: 'bg-red-500',
    badge: null
  }
]

// 底部导航配置
const bottomNav = [
  {
    name: '首页',
    path: '/student/home',
    icon: HomeIcon
  },
  {
    name: '缴费',
    path: '/student/payment',
    icon: CreditCardIcon
  },
  {
    name: '通知',
    path: '/student/notices',
    icon: BellIcon
  },
  {
    name: '我的',
    path: '/student/profile',
    icon: UserIcon
  }
]

// 今日安排
const todaySchedule = computed(() => {
  const today = new Date().toISOString().split('T')[0]
  return schedule.value.filter(item => item.date === today)
})

// 获取步骤状态文本
const getStepStatusText = (status) => {
  const statusMap = {
    completed: '已完成',
    in_progress: '进行中',
    pending: '待完成'
  }
  return statusMap[status] || '未知'
}

// 查看通知详情
const viewNotice = (notice) => {
  router.push(`/student/notices/${notice.id}`)
}

// 加载数据
const loadData = async () => {
  try {
    // 并行加载所有数据
    const [studentResult, statusResult, paymentResult, noticesResult, scheduleResult] = await Promise.all([
      studentStore.fetchStudentInfo(),
      studentStore.fetchRegistrationStatus(),
      studentStore.fetchPaymentInfo(),
      studentStore.fetchNotices(),
      studentStore.fetchSchedule()
    ])
    
    if (studentResult.success) {
      studentInfo.value = studentResult.data
    }
    
    if (statusResult.success) {
      registrationStatus.value = statusResult.data
    }
    
    if (paymentResult.success) {
      paymentInfo.value = paymentResult.data
    }
    
    if (noticesResult.success) {
      notices.value = noticesResult.data
    }
    
    if (scheduleResult.success) {
      schedule.value = scheduleResult.data
    }
  } catch (error) {
    console.error('Failed to load student data:', error)
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadData()
})
</script>

<style scoped>
@reference "../../style.css";

/* 移动端底部导航间距 */
@media (max-width: 640px) {
  main {
    @apply pb-20;
  }
}

/* 文本截断样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>